<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '选择售后类型',
  },
}
</route>
<template>
  <view class="refund-page">
    <!-- 退货退款选项 -->
    <view class="refund-option" @tap="handleReturnGoodsOrder('退货退款-整单退')">
      <view class="option-content">
        <view class="icon-placeholder">
          <wd-img src="/static/profile/return_money.png" width="80rpx" height="80rpx"></wd-img>
        </view>
        <view class="option-text">
          <text class="title">我要退货退款</text>
          <text class="desc">已收到货，需要退还已收到的货物</text>
        </view>
      </view>
      <view class="arrow"></view>
    </view>

    <!-- 仅退款选项 -->
    <view class="refund-option" @tap="handleReturnGoodsOrder('仅退款-整单退')">
      <view class="option-content">
        <view class="icon-placeholder">
          <wd-img src="/static/profile/return_shop.png" width="80rpx" height="80rpx"></wd-img>
        </view>

        <view class="option-text">
          <text class="title">我要退款(无需退货)</text>
          <text class="desc">未收到货，或与商家协商之后申请</text>
        </view>
      </view>
      <view class="arrow"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
const order = ref({})
const handleReturnGoodsOrder = (type: string) => {}
onLoad((options) => {
  order.value = JSON.parse(options.order)
  uni.navigateTo({
    url: `/pages/return-goods-order/return-goods-order?order=${JSON.stringify(order.value)}`,
  })
})
</script>

<style lang="scss" scoped>
.refund-page {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.refund-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;

  .option-content {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .icon-placeholder {
    margin-right: 20rpx;
    border-radius: 8rpx;
  }

  .option-text {
    display: flex;
    flex-direction: column;

    .title {
      margin-bottom: 8rpx;
      font-size: 32rpx;
      color: #333;
    }

    .desc {
      font-size: 26rpx;
      color: #999;
    }
  }

  .arrow {
    width: 16rpx;
    height: 16rpx;
    margin-left: 20rpx;
    border-top: 4rpx solid #999;
    border-right: 4rpx solid #999;
    transform: rotate(45deg);
  }
}
</style>
